<template>
  <div id="echarts4"></div>
</template>
<script>
export default {
  data() {
    return {
      timeInterval: null,
    }
  },
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
  },

  mounted() {
    this.showEcharts4()
  },
  created() {},
  methods: {
    showEcharts4() {
      var data = this.data
      let myChart = this.$echarts.init(document.getElementById('echarts4'))
      function deepCopy(obj) {
        if (typeof obj !== 'object') {
          return obj
        }
        var newobj = {}
        for (var attr in obj) {
          newobj[attr] = obj[attr]
        }
        return newobj
      }
      var xData = [],
        yData = []
     
      data.map((a, b) => {
        xData.push(a.name)
        yData.push(a.value)
      })
      var startColor = ['#0157be', '#7a18ed', '#00bbce', '#ea865a', '#EAEA26']
      var endColor = ['#0367d4', '#2743ed', '#00c4a5', '#ea2e41', '#f0f00a']
      var borderStartColor = ['#05acff', '#ee36ff', '#05fcfb', '#ffa597', '#d0d008']
      var borderEndColor = ['#09c1ff', '#8171ff', '#05ffff', '#ff6584', '#ffff0b']
      var RealData = []
      var borderData = []
      data.map((item, index) => {
        var newobj = deepCopy(item)
        var newobj1 = deepCopy(item)
        RealData.push(newobj)
        borderData.push(newobj1)
      })
      RealData.map((item, index) => {
        item.itemStyle = {
          normal: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: startColor[index], // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: endColor[index], // 100% 处的颜色
                },
              ],
              globalCoord: false, // 缺省为 false
            },
          },
        }
      })
      borderData.map((item, index) => {
        item.itemStyle = {
          normal: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: borderStartColor[index], // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: borderEndColor[index], // 100% 处的颜色
                },
              ],
              globalCoord: false, // 缺省为 false
            },
          },
        }
      })
      let option = {
        legend: {
          orient: 'vertical',
          icon: 'rect',
          x: '52%',
          y: '18%',
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 12,
          width: '100%',
          textStyle: {
            color: '#fff',
            fontSize: 12,
            padding: [5, 0, 5, 0],
          },
          formatter: function (name) {
            let data = option.series[0].data
            // console.log(data, 'data')
            let total = 0
            let tarValue
            for (let i = 0; i < data.length; i++) {
              total += data[i].value
              if (data[i].name == name) {
                tarValue = data[i].value
              }
            }
            let v = tarValue
            //计算出百分比
            let p = Math.round((tarValue / total) * 100) + '%'
            return `${name} ${v} | ${p}`
            //name是名称，v是数值
          },
        },
        tooltip: {
          formatter: '{a}：<br/>{b}: {c}',
        },
        series: [
          // 主要展示层的
          {
            radius: ['38%', '66%'],
            center: ['26%', '40%'],
            type: 'pie',
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            name: '住户信息',
            data: RealData,
          },
          // 边框的设置
          {
            radius: ['34%', '39%'],
            center: ['26%', '40%'],
            type: 'pie',
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            animation: false,
            tooltip: {
              show: false,
            },
            data: borderData,
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>
